<template>
  <span :class="isColor">{{ index+1 }}: {{ rlo }}</span>
</template>

<script>
export default {
    props:['index','isput','rlo','arr'],
data(){
    return {
        isColor:'undo'
    }
},
watch:{
    rlo:{
        deep:true,
        handler(){
            if(this.rlo=="错误"){
              this.isColor='error'
            }else if(this.rlo=="正确"){
                this.isColor='right'
            }else {
                 this.isColor='undo'
            }
        }
    },
    arr:{
         deep:true,
        handler(arr){
             if(arr.every(item=>item.isput===false)===true)
         {
             this.isColor='undo'
             this.$emit('resetInfo')
         }
        }
    }
}
};
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
span{
    margin-right: 10px;
}
</style>